import { Button, Form, Input, Card, Select } from 'antd';
import React, { FC, useEffect, useState, useContext } from 'react';

import { context } from '../index';

const Index: FC = () => {
  const [form] = Form.useForm();
  const { onSearchChange } = useContext(context);

  const onFinish = (values: any) => {
    // console.log('Finish:', values);
    onSearchChange(values);
  };
  const reset = () => {
    form.resetFields();
    onSearchChange({});
  };
  return (
    <Card>
      <Form
        form={form}
        name="horizontal_login"
        layout="inline"
        onFinish={onFinish}
      >
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
        <Form.Item name="sex" label="性别">
          <Select
            style={{ width: 120 }}
            allowClear
            options={[
              {
                value: '1',
                label: '男',
              },
              {
                value: '2',
                label: '女',
              },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={reset}>重置</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Index;
